<template>
  <el-dialog
      :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn') "
      v-model="visible"
      width="700"
      :close-on-click-modal="false"
      draggable
  >
    <el-form :model="dataForm" :rules="dataRules" label-width="80px" ref="dataFormRef" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('relation.checkTypeName')" prop="checkTypeName">
            <el-input clearable disabled :placeholder="$t('qms.CheckType')" v-model="dataForm.checkTypeName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('relation.checkType')" prop="checkType">
            <el-input clearable disabled :placeholder="$t('qms.checkCode')" v-model="dataForm.checkType"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('relation.relationItemCode')" prop="relationItemCode">
            <el-select :placeholder="$t('qms.AssociationCode')"
                       filterable
                       remote
                       @change="changeMaterial"
                       :remote-method="getMaterial"
                       v-model="dataForm.relationItemCode">
              <el-option v-for="item in materialList"
                         :key="item.processCode"
                         :label="item.processCode"
                         :value="item">
                <span style="float: left">{{ item.processCode }}</span>
                <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                    item.processName
                  }} </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('relation.relationItemName')" prop="relationItemName">
            <el-input disabled :placeholder="$t('qms.AssociatedName')" v-model="dataForm.relationItemName"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
        <el-button type="primary" @click="onSubmit"
                   :disabled="loading">{{ $t('common.confirmButtonText') }} </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">

// 1.定义变量内容
import {useMessage} from "/@/hooks/message";
import {addRelationH, mesProcessPage, updateRelationH} from "/@/api/platform/qms/qmsRelationH";
import {useI18n} from "vue-i18n";

const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);

const materialList = ref();

const {t} = useI18n();
//通知父组件刷新
const emit = defineEmits(['refresh']);


const getMaterial = (query: string) => {
  // materialList.value = [{
  //   "materialCode": "TI", "materialName": "TI"
  // }]
  mesProcessPage({
    "queryWord": query,
    "size": 10,
    "current": 1
  }).then( (res: any) => {
    if (res.code == 0) {
      materialList.value = res.data.records
    }
  })
}


// 提交表单
const onSubmit = async () => {
  loading.value = true;
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      loading.value = false;
      return false;
    }
    if (dataForm.id) {
      // id存在 则更新数据
      updateRelationH(dataForm).then((res: any) => {
        if (res.code !== 0) {
          useMessage().error(res.msg);
          return
        }
        loading.value = false;
        visible.value = false;
        emit('refresh');
        // 成功提示
        useMessage().success(t('qms.Successful'));
      }).catch(error => {
        loading.value = false;
        useMessage().error(error.msg);
      })

    } else {
      // dataForm将除了id以外的数据解构出来
      const {id, ...submitData} = dataForm;
      // id不存在 则新增数据
      addRelationH(submitData).then((res: any) => {
        if (res.code !== 0) {
          useMessage().error(res.msg);
          return
        }
        emit('refresh');
        loading.value = false;
        visible.value = false;
        // 成功提示
        useMessage().success(t('common.addSuccessText'));
      }).catch((error: any) => {
        loading.value = false;
        useMessage().error(error.msg);
      })
    }
  })
};


//物料点击事件
const changeMaterial = (e) => {
  dataForm.relationItemCode = e.processCode
  dataForm.relationItemName = e.processName

}

// 定义表单验证规则
const dataRules = reactive({
  checkTypeName: [
    {required: true, trigger: 'blur'}
  ],
  checkType: [
    {required: true, trigger: 'blur'}
  ],
  relationItemCode: [
    {required: true, trigger: 'blur'}
  ],
  relationItemName: [
    {required: true, trigger: 'blur'}
  ],
})

const dataForm = reactive({
  id: '',
  checkTypeName: '',
  checkType: '',
  relationItemCode: '',
  relationItemName: ''
});


// 定义方法
const openRelationHDialog = async (childRow: any, parentRow: any) => {
  dataForm.id = undefined

  // 重置表单数据
  await nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  // 判断是新增还是编辑的方法
  if (childRow?.id) {
    // 编辑操作
    Object.assign(dataForm, childRow);
  } else {
    // 新增操作 如果三个个属性为空，则提示错误
    if (!parentRow?.text || !parentRow?.value) {
      // 提示错误
      return useMessage().error(t('qms.PleaseSelectTheInspectionItem'));
    }
    dataForm.checkTypeName = parentRow?.text;
    dataForm.checkType = parentRow?.value;
  }
  visible.value = true;
}
// 编辑弹框
const openEditDialog = (data: any) => {
  visible.value = true;
  // 将data中的数据解构到dataForm中
  Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
  openRelationHDialog, openEditDialog
});


</script>
